<!--
 @description  销售开单核心指标统计
 @fileName CoreData.vue
 @author zengqiongying
 @created 2021/05/21 16:11:24
-->
<template>
  <div>
    <div class="core-box">
      <div class="core-item">
        <div class="c-title" @click.stop="openInstrusction('order','billing')">
          <img class="icon" src="@/assets/image/img_sales@2x.png">
          总开单(车)
          <img class="icon_inst" src="@/assets/image/icon_instructions.png">
        </div>
        <div class="today">今日<span class="color-red">{{ orderQuantity.today | filterForamtThousand }}</span></div>
        <div class="month">
          <div>昨日<span class="color-red">{{ orderQuantity.yesterday | filterForamtThousand }}</span></div>
          <div>本月<span class="color-red">{{ orderQuantity.month | filterForamtThousand }}</span></div>
        </div>
      </div>
      <div class="core-item">
        <div class="c-title" @click.stop="openInstrusction('order','vso')">
          <img class="icon" src="@/assets/image/img_order_vso.png">
          VSO(车)
          <img class="icon_inst" src="@/assets/image/icon_instructions.png">
        </div>
        <div class="today">今日新增<span class="color-blue">{{ vsoQuantity.today | filterForamtThousand }}</span></div>
        <div class="month">
          <div>今日已转<span class="color-red">{{ vsoQuantity.vso | filterForamtThousand }}</span></div>
          <div>累积未转<span class="color-red">{{ vsoQuantity.waitVso | filterForamtThousand }}</span></div>
        </div>
      </div>
      <div class="core-item">
        <div class="c-title" @click.stop="openInstrusction('order','care')">
          <img class="icon" src="@/assets/image/img_logistics@2x.png">
          配车数(车)
          <img class="icon_inst" src="@/assets/image/icon_instructions.png">
        </div>
        <div class="today">今日<span class="color-green">{{ careQuantity.today | filterForamtThousand }}</span></div>
        <div class="month">
          <div>昨日<span class="color-red">{{ careQuantity.yesterday | filterForamtThousand }}</span></div>
          <div>本月<span class="color-red">{{ careQuantity.month | filterForamtThousand }}</span></div>
        </div>
      </div>
      <div class="core-item">
        <div class="c-title" @click.stop="openInstrusction('order','waitCare')">
          <img class="icon" src="@/assets/image/img_ordercar.png">
          待配车数(车)
          <img class="icon_inst" src="@/assets/image/icon_instructions.png">
        </div>
        <div class="today">累积<span class="color-yellow">{{ careQuantity.waitCare | filterForamtThousand }}</span></div>
        <div class="month"><div class="empty" /></div>
      </div>
    </div>
    <div class="core-update-time">
      统计截止时间: {{ showDate }}
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { getSaleCoreQuantity, getSaleCoreVsoQuantity } from '@/apis/sale'
import { getLogisticsCoreCareQuantity } from '@/apis/logistics'
import showDateMixin from '@/mixins/showCoreTime'
export default {
  name: 'SaleOrderCoreData',
  mixins: [showDateMixin],
  props: {
    coreDate: {
      type: String,
      default: parseTime(new Date(), '{y}-{m}-{d}')
    }
  },
  data() {
    return {
      orderQuantity: {
        today: '-',
        yesterday: '-',
        month: '-'
      }, // 总开单数据
      vsoQuantity: {
        today: '-',
        vso: '-',
        waitVso: '-'
      }, // vso开单数据
      careQuantity: {
        today: '-',
        yesterday: '-',
        month: '-',
        waitCare: '-'
      } // 配车数据
    }
  },
  watch: {
    coreDate(val, oldVal) {
      this.getQuantityData()
    }
  },

  created() {
    this.getQuantityData()
  },
  methods: {
    getQuantityData() {
      const date = this.coreDate
      // 获取销售开单核心指标
      getSaleCoreQuantity(date).then(res => {
        if (res.data) {
          this.orderQuantity.today = res.data.todayBillingQuantity || '-'
          this.orderQuantity.yesterday = res.data.yesterdayBillingQuantity || '-'
          this.orderQuantity.month = res.data.monthBillingQuantity || '-'
        }
      })
      //  核心指标-VSO
      getSaleCoreVsoQuantity(date).then(res => {
        if (res.data) {
          this.vsoQuantity.waitVso = res.data.sumVsoQuantity || '-'
          this.vsoQuantity.today = res.data.todayVsoQuantity || '-'
          this.vsoQuantity.vso = res.data.todayVsoSoQuantity || '-'
        }
      })

      // 核心指标-订单配车
      getLogisticsCoreCareQuantity(date).then(res => {
        if (res.data) {
          this.careQuantity.today = res.data.todayCareQuantity || '-'
          this.careQuantity.yesterday = res.data.yesterdayCareQuantity || '-'
          this.careQuantity.month = res.data.monthCareQuantity || '-'
          this.careQuantity.waitCare = res.data.waitCareQuantity || '-'
        }
      })
    }
  }
}

</script>
<style lang='less' scoped>
.core-box{
    position: relative;
    display:flex;
    flex-wrap: wrap;
    &::before{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background: #F5F6F7;
    }
    .core-item{
      position: relative;
      width: 50%;
      height: 108px;
      padding:15px 10px;
      border-bottom:1px solid #F5F6F7;
      box-sizing: border-box;
      letter-spacing: 1px;
      color: #888;
      font-size: 12px;
      &::after{
        content: '';
        position: absolute;
        right: 0;
        top: 15px;
        bottom: 15px;
        width: 1px;
        background:#F5F6F7 ;
      }
      &:nth-child(2n){
        &::after{
          display: none;
        }
      }
      .today{
        display: flex;
        align-items:center;
        justify-content: center;
        height: 24px;
        line-height: 24px;
        margin-bottom: 10px;
        span{
          margin-left: 2px;
          font-size: 20px;
          font-family: 'PFZH';
        }
      }
      .month{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 16px;
        line-height: 16px;
        font-size:10px;
        white-space: nowrap;
        letter-spacing: 0;
        div:last-child{
          margin-left:5px;
        }
        span{
          margin-left: 1px;
        }
      }
      .empty{
        width: 70px;
        height: 10px;
        background: #F5F6F7;
      }
    }
  }
  .c-title{
    height: 20px;
    display: flex;
    justify-content: center;
    align-items:center;
    margin-bottom: 10px;
    color: #999;
    font-size: 12px;
    font-family: 'PFZH';
    white-space: nowrap;
    .icon{
      margin-right: 5px;
      width: 18px;
      height: auto;
    }
  }

  .core-update-time{
  //   border-top:1px solid #F5F6F7;
    padding-top: 10px;
    line-height: 18px;
    text-align: center;
    color: #999999;
    letter-spacing: 1px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
